【第2457期】Web网页滚动视差动画探索实践

前言

授人以渔。今日前端早读课文章由腾讯@P&PDesign投稿分享。

@P&PDesign简介：全称Platform & Publish Design，隶属于腾讯互动娱乐发行线下的设计中心，团队由视觉、交互、多媒体、UI开发人才构成，负责为腾讯游戏平台体系和发行业务提供体验和服务设计，包括WeGame平台、游戏本地化设计、端游手游助手、移动社区等业务；致力于游戏平台、UI、社区设计领域的研究和沉淀。公号:P&PDesign

正文从这开始~~

滚动视差体验介绍

网页滚动是用户与PC设备交互行为中最为基础的交互方式；最为基础的内容滚动交互行为，通过程序给网页中的元素增加属性滚动关联变化，则可以让页面中的元素焕发活力；

我们在调研滚动体验的过程中，通过一文《Stealing Game Animation Techniques to Engage Users》了解到了游戏发行商 DevolverDigital 的设计师，在设计制作平台游戏 《Olija 奥利亚》 官网的过程中，很好的将用户滚动的交互方式与游戏化的界面元素进行结合，让用户无需下载游戏，即可通过页面简单的滚动交互体验到游戏内的画面及玩法，给用户带来了更为沉浸式的页面浏览体验。

滚动视差案例分析

我们对 《Olija 奥利亚》 网页实现效果进行了体验分析，发现当用户滚动时，页面元素动画随着用户滚动操作而进行播放，感觉用户在滚动过程中可以控制角色动作，仿佛置身在游戏当中。

从技术侧的体验视角来看 《Olija 奥利亚》 ，分析页面中的动画实现，主要通过浏览器页面滚动事件 onScroll 监听滚动事件，并处理页面元素属性变化实现了滚动交互的动画，在动画属性的变化过程中，赋予不同的差值，则可以感受到速度的差异，从而有了滚动视差的体验。

我们梳理了在 《Olija 奥利亚》 实现的动画效果中，所应用到的变化属性主要有：位移、缩放、透明度、背景定位变化（帧动画）。通过这几种属性结合用户滚动事件的响应，很好的实现了页面中元素的前后转场过渡效果。我们可以感受下以下几种属性结合滚动事件变化实现的效果：

1、 位移：（实现场景中通过滚动可控制人物的跳跃、行走、攻击、及场景切换）

2、 缩放属性：（实现场景切换：通过滚动控制场景镜头缩放推进并消失，切换到海中场景）

3、透明度属性：（实现场景切换：通过滚动出现暴风雨，人物从小船上掉落海中，再切换到岸上）

4、 背景帧动画：（通过滚动控制小船在暴风雨中摇晃场景到小船被大海吞噬）

Website: https://olija.com/

滚动交互还可以做什么不一样的体验呢？

从滚动体验上看，我们还可以从滚动的方向上着手，给用户带来不一样的滚动体验。

1、纵向滚动，由下向上

正常的网页浏览顺序是由上往下滚动，而在《 Exit the Gungeon 逃出地牢》这款游戏的官网中，我们体验到设计师为了让用户体验到与游戏内一致的游戏动画体验，将页面的滚动修改为需要由下向上进行滚动。在滚动的过程中可以体验到游戏场景背景、NPC角色的运动、道具子弹的飞行等等游戏动画场景，用户可以通过轮来控制动画的速度。

由于担心用户不知道是向上滚动，细心的设计师在首屏的右下角提供了 “Scroll Up” 的动画引导提示；

Website: https://enterthegungeon.com/exit-the-gungeon

2、横向滚动，由左至右

在《APE OUT》这款游戏中，游戏是一款节奏激烈的横版动作游戏，因此设计在官网的设计中采用了横向的滚动方式（由左至右），在游戏官网的滚动体验过程中，以俯视的视角进行滚动切换，在实现上利用通过滚动事件监听，处理元素的 3D perspective-origin 属性，改变元素的透视中心点，而实现了3D 俯视镜头视角位移的效果；

Website: https://apeout.com/

项目中实践

在 WeGame 2.0 改版项目中，我们主要负责 WeGame 客户端平台及官网的设计改版工作。在本次官网的改版设计改版过程中，主要需要对头部三个主要页面进行设计制作（首页、客户端、移动端、翼计划）。

案例1、官网首页

官网首页主要为表达 WeGame产品官方对外发声团队的方向。在首页排版设计中，设计师倾向于内容流形式进行平铺设计；视觉设计侧主要将品牌元素应用在页面首屏KV元素、及页面模块图标元素中。为提高页面传统的内容流布局在体验中的愉悦度，我们与设计沟通确认官网动效实现细节主要分为以下部分：

技术实现：

1、 页面入场：通过KV视差动画进行实现；

2、 页面滚动过程：增加滚动视差动画，在滚动过程中增加元素动画；

3、 局部元素增加微动效。

最终效果，可体验：https://www.wegame.com.cn/home

案例2、客户端下载页

在客户端的下载页中，主要为用户提供客户端版本下载链接，同时介绍 WeGame 2.0 客户端升级改版内容。

设计效果对齐：

在与具体设计师沟通实现过程中，我们同样也与设计师在设计前期沟通期望实现效果，以及通过案例对齐实现目标。与设计师对产品同学提供的内容进行分析度平估，认为产品侧期望表达的内容前后并无太多关联性，并且内容不太容易触达用户，在设计上存在一定挑战，因此期望尝试通过元素滚动动画（Scroll + CSS属性）的方式，在场景滚动切换中希望能通过流畅的场景切换来引导用户向下浏览。

产品诉求：

视觉设计输出：

设计同学为方便与开发同学对接，在设计环节输出场景视觉分镜及演示动画，为方便效果在实现上的细节对接。

场景切换动画实现剖析：

页面滚动动画实现：采用上述小结中的 Scroll + CSS 属性动画方案，在场景切换过程中大部分使用了位移、透明度、缩放属性动画来实现场景实现；

1、 利用 Mask-image 属性实现场景切换：

动画分析：在首屏品牌刷新动画播放完毕后，当用户向下滚动鼠标时，需在 WeGame LOGO 图型中露出第2部分场景内容；

具体实现：实现思路上，场景1放大消失的同时设置 mask-image 属性，露出场景2内容。

实现上使用 skrollr js 库实现效果，以下为 skrollr js 库属性动画设置示意：

<!-- 滚动设置 mask-size 将遮罩区域放大 -->
<div class="screenshoot-list  wgsection-mask" data-0="mask-size:21% auto;" data-900="mask-size:4000% auto">
....
</div>

<!-- 滚动设置scale缩放图层 -->
<div class="wb-logo-mask" data-0="transform:scale(1)" data-900="transform:scale(190)">
...
</div>

/* 设置场景1遮罩 */
.wgsection-mask{
    mask-image: url("../xxx/sc01-logo.svg");
    mask-repeat: no-repeat;
    mask-size: 21% auto;
    mask-position: 50% 51%;
    z-index: 120;
}

2、 利用缩放实现场景切换案例：

实现思路：场景3放大消失退场的同时场景4元素缩小显示入场，实现场之前交替显示隐藏；

<!-- 场景3 元素放大 -->
<div class="wgsection wgsection--3">
    <div class="cont-tit01-inner" data-1750="transform:scale3d(1,1,1); transform-origin:50% 50%" data-2850="scale3d(160,160,1);transform-origin:50% 60%">
    ...
    </div>
</div>
<!-- 场景4 元素缩小 -->
<div class="wgsection wgsection--4">
    <span class="wgsection-mtit06" data-1850="opacity:0; transform:scale3d(4,4,1);" data-2450="opacity:1; transform:scale3d(1,1,1);">
    ...
    </span>
</div>

体验问题优化：

在最终与设计师对齐体验时，感觉页面元素动画过多导致用户滚动浏览时长被增长；因此在实现上我们通过评估，处理方案为：

优化1、合并部分元素滚动动画，修改为一次性触发动画实现。

当用户滚动触发零界点时，动画会自动播放，无需用户滚动一点点触发变化。

优化2、场景滚动进度体现，增加自动播放及场景跳转交互。

我们在滚动过程体验中，考虑到用户无法预知内容情况，在页面右侧，提供场景进度及导航元素。

最终效果，可体验：https://www.wegame.com.cn/client/

滚动视差实现小结

结合案例的分析，滚动交互可以结合以下技术组合进行实现，创意的设计结合技术实现可以给用户带来令人印象深刻的体验。

Scroll + CSS属性（滚动视差）

我们可以利用滚动事件，结合元素 Opacity、Translate、Scale、Rotate、Background、Color、Clip-path、Mask-size 属性进行组合变化而满足产品及设计预期。

Scroll + 序列帧/视频：

通过滚动事件控制序列帧播放应用：

Scroll + SVG：

利用SVG 矢量路径优势，结合滚动修改SVG图形路径体验。

Scroll + 3D；

利用滚动事件，修改模型属性，也可以通过滚动控制镜头切换体验。

@P&PDesign曾分享过

欢迎自荐投稿VX:zhgb_f2er，前端早读课等你来。